<template>
  <div class="Login-div">
    <div class="Login-left"></div>
    <div class="Login-right">
      <div class="lin1 lin"></div>
      <div class="Login-right-main">
        <el-form
          status-icon
          
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"

        >
          <el-form-item
            label="密码:"
            prop="pass"
          >
            <el-input placeholder="请输入内容" ></el-input>
          </el-form-item>
          <el-form-item
            label="密码:"
            prop="pass"
          >
            <el-input placeholder="请输入内容" ></el-input>
          </el-form-item>
          <el-form-item
            label="密码:"
            prop="pass"
          >
            <el-input placeholder="请输入内容" ></el-input>
          </el-form-item>
          <el-row>
             <el-button type="primary" v-on:click="test()">主要按钮</el-button>
          </el-row>
        </el-form>
        <el-row class="bottom">
          <el-checkbox class="a1"> <el-link href="https://element.eleme.io" target="_blank">同意协议</el-link></el-checkbox>
          <el-link href="https://element.eleme.io" target="_blank" class="a2" >注册</el-link>
        </el-row>
      </div>

      <div class="lin2 lin"></div>
      <div class="lin3 lin"></div>
      <div class="lin4 lin"></div>
      <div class="lin5 lin"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      }
    };
  },
  methods: {
      test(){
        this.get('/test').then(res=>{
          console.log(res);
        });
      }
  }

}
</script>

<style >
* {
  margin: 0px;
  padding: 0px;
}

.Login-div {
  width: 100vw;
  height: 100vh;
  background: tomato;
  display: flex;
}
.Login-left {
  width: 50%;
  height: 100%;
  background: turquoise;
}
.Login-right {
  width: 50%;
  height: 100%;
  background: yellow;
  position: relative;
}
.Login-right-main {
  width: 500px;
  height: 500px;
  position: relative;
  margin: auto;
  top: 10%;
  background: wheat;
}
.lin {
  width: 70px;
  height: 70px;
   top: 10%;
  background: red;
  display: inline-block;
  position: relative;
}
.lin2{
left: -25%;
top: -50%;
}
.lin5{
left: 25%;
top: -50%;
}
.lin3{
left: -20%;
}
.lin4{
left: 20%;
}
.demo-ruleForm,.bottom{
  position: relative;
  top: 20%;
}
.el-input__inner{
  width: 80%;
}
.a1{
  float: left;
  left: 20%;
}
.a2{
  float: right;
  right: 20%;
}
</style>
